<template>
  <div class="wrapper">
    <logoTitle></logoTitle>
    <div @click="handleDatasetSelect" class="center-title">
      <span class="prefix">{{ mapStore.datasetInfo.name }} -</span>
      <n-tag size="small">{{ mapStore.datasetInfo.pid }}</n-tag>
    </div>

    <n-popover trigger="click" :show-arrow="false">
      <template #trigger>
        <n-button size="small">分享</n-button>
      </template>
      <ShareCard></ShareCard>
    </n-popover>
    <n-divider vertical></n-divider>
    <userProfile></userProfile>
  </div>
</template>

<script lang="ts" setup>
import { Component, ref, h } from "vue";
// const userInfo = ref({
//   img: "https://rcs-bucket.oss-cn-hangzhou.aliyuncs.com/app%2Fspace%2F7c7adc8ccc524163921d2d403f1f3c5b_d7f6b05214f24a6a842f2acaa2e30146_buoumao-zhongdianse.png",
//   name: "Admin",
// });
import { useMainStore } from "../../../../store/index";
import { useUserStore } from "@/store/user";
import { NIcon } from "naive-ui";
import ShareCard from "../share/index.vue";
import userProfile from "@/components/login/user-profile.vue";
import logoTitle from "@/components/logo-title/index.vue";
import {
  PersonCircleOutline as UserIcon,
  Pencil as EditIcon,
  LogOutOutline as LogoutIcon,
} from "@vicons/ionicons5";
import { useMapStore } from "@/store/map";
const mapStore = useMapStore();
const mainStore = useMainStore();
const userStore = useUserStore();

const renderIcon = (icon: Component) => {
  return () => {
    return h(NIcon, null, {
      default: () => h(icon),
    });
  };
};
const handleDatasetSelect = () => {
  mapStore.configType = "dataset";
};
</script>

<style lang="scss" scoped>
.wrapper {
  height: 60px;
  display: flex;
  align-items: center;
  // background-color: rgb(24, 24, 28);
  box-sizing: border-box;
  padding: 0 12px;
  .logo-title {
    font-weight: bold;
    // color: #fff;
  }

  .center-title {
    cursor: pointer;
    margin: 0 auto;
    .prefix {
      margin-right: 0.5em;
    }
  }
  .center-title:hover {
    text-shadow: 0px 0px 1px rgb(42, 148, 125);
  }
}
</style>
